<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>

<script src="easeljs-0.7.1.min.js"></script>
<script src="preloadjs-0.4.1.min.js"></script>
<script src="soundjs-0.5.2.min.js"></script>
<script src="tweenjs-0.5.1.min.js"></script>
<script src="BitmapText.js"></script>
<script src="movieclip-0.7.1.min.js"></script>

<body>
	<canvas id="mycanvas" width="800rpx" height="500rpx" style="border: 1px solid #ccc;"></canvas>
	<br/>
	<div style="display: flex;">
		<div style="font-size: 15px;">调整颜色: </div>
		<button style="width: 80px;background-color: yellow;" onclick="changeyellow()">yellow</button>
		<button style="width: 80px;background-color: blue;" onclick="changeblue()">blue</button>
		<button style="width: 80px;background-color: red;" onclick="changered()">red</button>
		<button style="width: 80px;background-color: green;" onclick="changegreen()">green</button>
		<button style="width: 80px;background-color: white;" onclick="changewhite()">white</button>
		
	</div>

	<div style="display: flex;">
		<div style="font-size: 15px;">调整粗细: </div>
		<button style="width: 80px;background-color: white;" onclick="lineup()">变粗</button>
		<button style="width: 80px;background-color: white;" onclick="linedown()">变细</button>
		<div id="odv" style="width: 80px;height: 20px;border: 1px solid #000;">4px</div>
	</div>

	<div style="display: flex;">
		<div style="font-size: 15px;">橡皮清除: </div>
		<button style="width: 80px;background-color: white;" onclick="clears()">eraser</button>
		<button style="width: 80px;background-color: black;" onclick="cleares()">clear</button>
	</div>

	<div style="display: flex;flex-direction: column;">
		<button style="width: 80px" onclick="daochu()">put</button>
		<img id="img_png" style="width: 800px; height: 500px;" src=""></img>
	</div>
	
	
</body>
</html>

<script type="text/javascript">
// 黑板
	var canvas = document.getElementById('mycanvas');
	var context = canvas.getContext('2d');
	var odv = document.getElementById('odv');
	context.fillStyle = 'black'
	context.fillRect(0,0,800,500);
	var onoff = false;
	var flag = false;
	var linecolor = "white";
	var linw = 4;
	var oldx = -10;
	var oldy = -10;
	canvas.addEventListener('mousemove',draw,true);
	canvas.addEventListener('mousedown',down,false);
	canvas.addEventListener('mouseup',up,false);


// 画笔函数
	function down(e){
		onoff = true;
		oldx = e.pageX-10;
		oldy = e.pageY-10;
	};

	function up(){
		onoff = false
	};

	function draw(e){
		if (onoff == true){
			if (flag){
				var newx = e.pageX-10;
				var newy = e.pageY-10;
				context.beginPath();
				context.moveTo(oldx,oldy);
				context.lineTo(newx,newy);
				context.strokeStyle = 'black';
				context.lineWidth = 20;
				context.lineCap = 'round';
				context.stroke();
				oldx = newx;
				oldy = newy;
			}else{
				var newx = e.pageX-10;
				var newy = e.pageY-10;
				context.beginPath();
				context.moveTo(oldx,oldy);
				context.lineTo(newx,newy);
				context.strokeStyle = linecolor;
				context.lineWidth = linw;
				context.lineCap = 'round';
				context.stroke();
				oldx = newx;
				oldy = newy;
			}
		}
	};

// 清除函数
	function cleares(){
		context.clearRect(0,0,800,500);
		context.fillStyle = "black";
		context.fillRect(0,0,800,500);
	}

// 橡皮擦函数
	function clears(){
		flag = true;
	}


// 调整颜色函数群
	function changeyellow(){
		flag = false;
		linecolor = 'yellow';
	}
	function changeblue(){
		flag = false;
		linecolor = 'skyblue';
	}
	function changered(){
		flag = false;
		linecolor = 'red';
	}
	function changegreen(){
		flag = false;
		linecolor = 'green';
	}
	function changewhite(){
		flag = false;
		linecolor = 'white';
	}

// 粗细函数
	function lineup(){
		linw = linw + 2
		if (linw>=20){
			linw=20
		}
		odv.innerHTML = linw + "px"
	}
	function linedown(){
		linw = linw - 2
		if (linw<=2) {
			linw=2
		}
		odv.innerHTML = linw + "px"
	}

	function daochu(){
		var img_png_src = canvas.toDataURL("image/png");
		document.getElementById('img_png').src = img_png_src
	}
</script>